<!-- 电力组件 -->
<template>
  <div class="model" :style="modelStyle">
    <div :style="size" class="text">{{name}}</div>
  </div>
</template>

<script>
  export default {
    props: ["width", "height", "name", "pdata", "icon"],
    data: function () {
      return {}
    },
    computed: {
      modelStyle(){
        let a = { backgroundImage: 'url('+this.icon+')',width:this.width,height:this.height}
        return a
      },
      size() {
        let num = 1
        if (this.fontTransform && this.fontTransform != 1) {
          num = 0.7
        }
        return {
          color: this.color ? this.color : "#1e3657"
        }
      }
    }
  };

</script>

<style lang="scss" scoped>
  .model {
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .text {
    color: #1e3657;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    padding-top: 30px;
    z-index: 2;
    font-weight: 800;
  }
</style>
